<template>
  <div :style="formItemStyles"
       :class="formItemClasses">
    <!--label-->
    <label :class="labelClasses"
           :for="elementId"
           :style="labelStyles"
           v-if="isShowLabel">
      <slot name="label">{{label}}</slot>
    </label>
    <div tabindex="0"
         @keydown.down="handleFocus"
         :class="classes"
         @click="toggleMenu"
         ref="reference"
         v-clickoutside="handleClose">
      <slot name="input">
        <input type="hidden"
               :name="name"
               :value="model" />
        <template v-if="!showPlaceholder && multiple">
          <div :class="[prefix+'-tag' ,prefix+'-tag-checked']"
               v-for="(item, index) in selected"
               :key="index">
            <span :class="[prefix+'-tag-text']"
                  :title="showTitle ? item.label : ''">{{ item.label }}</span>
            <i :class="[`${prefix}-icon ${prefix}-icon-ios-close-empty`]"
               @click.stop="removeTag(index)"></i>
          </div>
        </template>
        <span :class="[prefixCls + '-selected-value']"
              :title="showTitle ? selected : ''"
              v-if="!showPlaceholder && !multiple && !filterable">{{ selected }}</span>
        <span :class="[prefixCls + '-placeholder']"
              v-if="showPlaceholder && !filterable">{{ placeholder }}</span>

        <input :id="elementId"
               ref="input"
               type="text"
               :title="showTitle ? query : ''"
               v-if="filterable"
               v-model="query"
               :disabled="disabled"
               :class="[prefixCls + '-input']"
               :placeholder="showPlaceholder ? placeholder : ''"
               :style="inputStyle"
               autocomplete="off"
               spellcheck="false"
               @click.stop="handleQueryInputClick"
               @keyup="handleQueryChange"
               @keydown.delete="handleInputDelete" />
        <i :class="[`${prefix}-icon ${prefix}-icon-ios-close`, `${prefixCls}-arrow`]"
           v-show="showCloseIcon"
           @click.stop="clearSelect"></i>
        <i :class="[`${prefix}-icon ${prefix}-icon-arrow-down-b`, `${prefixCls}-arrow`]"></i>
      </slot>
      <transition name="transition-drop">
        <Drop :class="dropdownCls"
              v-show="dropVisible"
              v-if="dropLoaded"
              :placement="placement"
              ref="dropdown"
              :data-transfer="transfer"
              :width="dropdownWidth"
              :className="popupClass"
              v-transfer-dom>
          <div v-show="currentLoading || notFoundShow"
               :class="{[`${prefixCls}-not-found`]: notFoundShow, [`${prefixCls}-loading`]: currentLoading}">{{emptyText}}</div>
          <ul v-show="(!notFound && !remote) || (remote && !currentLoading && !notFound)"
              :class="[prefixCls + '-dropdown-list']"
              ref="dropdownUL"
              :style="dropDownListStyles">
            <slot>
              <template v-if="dividedGroups">
                <aty-option-group :showTitle="showTitle"
                                  :showInvalid="showInvalid"
                                  :htmlHighLight="false"
                                  :data="currentData" />
              </template>
              <template v-else>
                <atyOption v-for="item in currentData"
                           :key="item.code + item.name"
                           :value="item.code"
                           :disabled="item.disabled"
                           :showTitle="showTitle"
                           :label="item.name"
                           :simpleSpell="item.simpleSpell"
                           :fullSpell="item.fullSpell"
                           :valid="item.valid"
                           :htmlHighLight="false"
                           :showInvalid="showInvalid" />
              </template>
            </slot>
            <slot name="option"></slot>
            <slot name="optionGroup"></slot>
          </ul>
        </Drop>
      </transition>
    </div>
    <!--验证提示-->
    <div :class="errorTipClasses"
         :style="errorTipStyles"
         v-if="isShowMessage">
      {{validateMessage}}
    </div>

  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
